<template>
  <div class="writeform">

    <!-- 搜索 -->
    <div class="weui_search_bar" :class="{weui_search_focusing:isFocus}">
      <div class="weui_search_outer">
        <div class="weui_search_inner">
          <i class="ion ion-ios-search"></i>
          <input type="text" class="weui_search_input" name="searchParam" ref="searchInput" placeholder="搜索" required=""
                 @blur="searchBlur" @keyup="searchUp">
          <a href="javascript:" class="ion ion-ios-close" id="search_clear" @click="searchClear"></a>
        </div>
        <label for="search_input" class="weui_search_text" @click='searchInit'>
          <i class="ion ion-ios-search"></i>
          <span>搜索</span>
        </label>
      </div>
      <a href="javascript:" class="weui_search_cancel" @click="searchCancel">取消</a>
    </div>


      <div class="totleandok clearFix">
        <!-- <p v-if="$parent.chooseOnly == 1">共选择 {{totlePersion}} 人</p> -->
         <button type="button" @click="backParent">返回</button>
        <button type="button" class="shureok" @click="chooseOk">确定</button>
       

      </div>

    <!-- title -->
    <div class="userlist-cont">
        <div class="usertitle">
          <p>选择人员</p>
        </div>



        <div class="user_list">
          
          <ul v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
            <li v-for="(item,index) in userList" @click="addStatus($event, item, index)" :id="item.employeeSn">
              <p>{{item.employeeName}}</p>
              <span>{{item.depName}}</span>
               <i class="ion ion-ios-checkmark"></i>
            </li>
          </ul>
        </div>
    </div>
    <loading v-if="loadShow"></loading>
  </div>
</template>

<script type="text/javascript">

  import safeUrl from '../../assets/js/insterface'

  import http from '../../assets/js/http_mixin'

  export default {
    data() {
      return {
        isFocus: false,
        totlePersion: 0,
        chooseUser: [],
        userList: [],
        newUserList:[],
        oneNewUserList:[],

        pageTotle: '',
        count: 0,
        data: [],
        busy: false
      }
    },
    props:['findType'],
    mounted() {
      document.title = "选择人员";
      this.getUserList();
      if(this.$parent.list.emceeNo){
        this.oneNewUserList = [{employeeSn:this.$parent.list.emceeNo,employeeName:this.$parent.emccName}]
      }
      for( let value of this.$parent.userListArr) {
          this.newUserList.push(value)
      }
      // this.$el.parentElement.parentNode.style.background = '#fff';
    },
    mixins: [http],
    methods: {
      loadMore() {
        var vue = this;
        this.busy = true;
        // debugger
        if (this.pageTotle > this.count && this.userList.length > 0) {
            vue.getUserList();
        }
      },
      getUserList() {
        var vue = this;
        var params = {
          depId: this.$parent.list.depId,
          // depId:'104',
          currentPage: this.count,
          pageSize: '10',
          searchParam: this.$refs.searchInput.value,
          findType:this.findType?this.findType:''
        };
        // debugger;
        this.getInfo({
          url: safeUrl.userListPage,
          param: params,
          success(response){
            var resopnseData = response.data.data;
            this.pageTotle = response.data.pages;
            if (this.pageTotle > this.count) {
              // debugger;
              if (resopnseData.length > 0) {
                for (var i = 0; i < resopnseData.length; i++) {
                  this.userList.push(resopnseData[i]);
                }
              }
              this.count++;
            }
            this.busy = false;
            setTimeout(function(){
              vue.checkChoose();
              // vue.checkOwnPage();
            })
            
          }
        });
      },
      //从主页面到子组件之间判断是否打钩
      checkChoose() {
        // debugger;
        if (this.$parent.userListArr.length != 0 && this.$parent.chooseOnly == 1) {  
           // this.newUserList = [];
           

          var sessionId = [];
          var userListArr = this.$parent.userListArr;
          this.totlePersion = userListArr.length;
          for (var j = 0; j < userListArr.length; j++) {
            sessionId.push(userListArr[j].employeeSn);
          }
          var liChecked = document.getElementsByTagName("li");
          for (var i = 0; i < liChecked.length; i++) {
            if (sessionId.indexOf(liChecked[i].getAttribute("id")) != -1) {
              liChecked[i].setAttribute('class', 'checked')
            }
          }
        }else if(this.$parent.list.emceeNo && this.$parent.chooseOnly == 0){
          var liChecked = document.getElementsByTagName("li");
          for (var i = 0; i < liChecked.length; i++) {
            if (this.$parent.list.emceeNo == liChecked[i].getAttribute("id")) {
              liChecked[i].setAttribute('class', 'checked')
            }
          }
          
        }
      },
      //li点击的时候添加到数组里面
      addStatus(e,item,index) {
        var indexItem ;
        if (this.$parent.chooseOnly == 1) {
          if (e.currentTarget.getAttribute('class') == 'checked') {
            this.newUserList.map(function(eve,i){
              if(eve.employeeName === item.employeeName){
                indexItem = i;
              }
            });
            e.currentTarget.setAttribute('class', '');
            this.newUserList.splice(indexItem,1);
            this.totlePersion--;
          } else {
            e.currentTarget.setAttribute('class', 'checked');
            this.newUserList.push(item);
            this.totlePersion++;
          }
        } else if (this.$parent.chooseOnly == 0) {
          if (e.currentTarget.getAttribute('class') == 'checked') {
             e.currentTarget.setAttribute('class', '');
             this.oneNewUserList = [];
          } else {
            var liArr = document.getElementsByTagName("li");
            for (var k = 0; k < liArr.length; k++) {
              liArr[k].setAttribute('class', '');
            }
            e.currentTarget.setAttribute('class', 'checked');
            this.oneNewUserList = [];
            this.oneNewUserList.push(item);
            
          }
        }
        
      },
      chooseOk() {
        // debugger;
        if (this.$parent.chooseOnly == 1) {
          this.$parent.userListArr = this.newUserList;
          this.$parent.userComponts = false;
        } else if (this.$parent.chooseOnly == 0) {
          //判断主持人是否在成员列表
          for(let i = 0; i<this.$parent.userListArr.length;i++){
            if(this.$parent.userListArr[i].type == 1){
              this.$parent.userListArr.splice(i,1);
            }
          }
          for(let i = 0; i < this.$parent.userListArr.length; i++){
            if(this.$parent.userListArr[i].employeeSn == this.oneNewUserList[0].employeeSn){
              this.$parent.userListArr.splice(i,1);
            }
          }
          this.$parent.userListArr.push(this.oneNewUserList[0]);
          this.oneNewUserList[0].type = 1;
          
          this.$parent.list.emceeNo = this.oneNewUserList[0].employeeSn;
          this.$parent.emccName = this.oneNewUserList[0].employeeName;
          this.$parent.userComponts = false;
        }
        // debugger;
      },
      backParent() {
        console.log(this.newUserList);
        this.$parent.userComponts = false;
      },
      searchUp() {
        this.userList = [];
        this.count = 0;
        this.getUserList();
      },
      searchInit() {
        this.isFocus = true;
        let searchInput = this.$refs.searchInput;
        searchInput.focus();
      },
      searchCancel(){
        let searchInput = this.$refs.searchInput;
        searchInput.value = '';
        this.isFocus=false;
        this.userList = [];
        this.count = 0;
        this.getUserList();
        
      },
      searchBlur(){
        let searchInput = this.$refs.searchInput;
        this.isFocus = true;

        //this.getSafetyLoopData();

      },
      searchClear(){
        this.userList = [];
        this.count = 0;
        let searchInput = this.$refs.searchInput;
        searchInput.value = '';
        this.getUserList();
        //this.getSafetyLoopData();

      }
    }
  }
</script>
